<!DOCTYPE html>
{block name="include"}{include file="head" /}{/block}
<html class="x-admin-sm">
    <style type="text/css">
                          .layui-table-cell{
                              height:auto!important;
                              white-space:normal;
                          }
    </style>
    <body id="record_list">
        <div class="x-nav">
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" >
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="user_name"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  type="button"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn" onclick="xadmin.open('添加用户','{:url(\'admin/user/create\')}')"><i class="layui-icon"></i>添加</button>
                        </div>
                        <div class="layui-card-body " id="table">
                            <table class="layui-table layui-form" lay-filter="demo">
                                <thead>
                                <tr>
                                    <th lay-data="{field:'id',align:'center'}">ID</th>
                                    <th lay-data="{field:'user_thumb_img',align:'center'}">照片</th>
                                    <th lay-data="{field:'user_name',align:'center'}">账号</th>
                                    <th lay-data="{field:'role',align:'center'}">角色</th>
                                    <th lay-data="{field:'create_time',align:'center'}">加入时间</th>
                                    <th lay-data="{field:'user_status',align:'center'}">状态</th>
                                    <th lay-data="{fixed: 'right', align:'left', toolbar: '#barDemo'}">操作</th>
                                </thead>
                                <tbody>
                                {foreach $data as $v}
                                <tr style="text-align: center">
                                    <td>{$v.id}</td>
                                    <td><img src="{$v.user_thumb_img}" alt="网络无法加载头像"></td>
                                    <td>{$v.user_name}</td>
                                    <td>{$v.role.role_name}</td>
                                    <td>{$v.create_time}</td>
                                    <td>
                                        {if $v.user_status == '启用'}
                                        <span class="layui-btn layui-btn-normal layui-btn-mini">{$v.user_status}</span>
                                        {else}
                                        <span class="layui-btn layui-btn-normal layui-btn-disabled">{$v.user_status}</span>
                                        {/if}
                                    </td>
                                    <td class="td-status"></td>
                                    <td class="td-manage" id="barDemo">
                                        <a title="编辑" data-id="{$v.id}"  lay-event="edit" href="javascript:;">
                                          编辑
                                        </a>
                                        <a title="修改密码" data-id="{$v.id}"  lay-event="detail" href="javascript:;">
                                          修改密码
                                        </a>
                                        <hr class="hr2">
                                        <a title="删除" data-id="{$v.id}"  lay-event="del" href="javascript:;">
                                           删除
                                        </a>
                                    </td>
                                </tr>
                                {/foreach}
                                </tbody>
                            </table>

                        </div>
                        <div class="layui-card-body ">
                            <div class="page" id="page">
                                {$data->render()|raw}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </body>
    <script>
      layui.use(['laydate','form','table'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
          var table = layui.table;
          table.init('demo', {

              //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
              //支持所有基础参数

              limit: 10
          });

          table.on('tool(demo)',function (object) {
              var tr = object.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              var layEvent = object.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var data = object.data.id;
              console.log(layEvent);
              if(layEvent === 'detail'){
                  var url = "{:url('admin/user/password')}?id="+data;
                  xadmin.open('修改密码',url)
              }else if (layEvent === 'del'){
                  member_del(tr,data)
              }else {
                  var url = "{:url('admin/user/update')}?id="+data;
                  xadmin.open('编辑',url)
              }
          });
          form.on('submit(sreach)',
              function(data) {

                  $.ajax({
                      url: "{:url('admin/User/index')}",
                      type:'post',
                      data:data.field,
                      success:function (res) {

                              var html = $(res).find('#table');
                              var h = $(res).find('#page');
                              $('#table').html(html);
                              $('#page').html(h);
                      }
                  });

              });


          //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });



      });



      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              $.ajax({
                  url: "{:url('admin/User/delete')}",
                  type:'post',
                  data:'id='+id,
                  success:function (callback) {
                      if (callback.msg == 200){
                          //发异步删除数据
                          $(obj).remove();
                          layer.msg('已删除!',{icon:1,time:1000});
                      }else {
                          layer.msg(callback.msg, {icon: 5})
                      }

                  }
              });

          });
      }





    </script>

</html>